<template>
  <div>
    <canvas></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  MeshBuilder,
  HemisphericLight,
  StandardMaterial,
  Color3,
  MultiMaterial,
  Texture,
  Vector4,
  GroundMesh,
  Mesh
} from '@babylonjs/core'

onMounted(() => {
  const canvas = document.querySelector('canvas')! as HTMLCanvasElement
  // 创建引擎
  const engine = new Engine(canvas, true)
  // 创建场景
  const scene = new Scene(engine)
  // 创建相机
  const camera = new ArcRotateCamera(
    'camera',
    -Math.PI / 2,
    Math.PI / 2.5,
    10,
    new Vector3(0, 0, 0)
  )
  // 运用相机和画布关联起来
  camera.attachControl(canvas, true)
  const light = new HemisphericLight('light', new Vector3(0.5, 0.5, 0))
  const ground = buildGround()
  const roof = buildRoof()
  const box = buildBox()
  const roof1 = buildRoof1()
  const box1 = buildBox1()
  adjust(ground, roof, box)
  adjust1(ground, roof1, box1)
  // 渲染处理
  engine.runRenderLoop(() => {
    scene.render()
  })
  window.addEventListener('resize', function () {
    engine.resize()
  })
})
// 创建地面
function buildGround() {
  const ground = MeshBuilder.CreateGround('ground', { width: 6, height: 3 })
  const Material = new StandardMaterial('Material')
  ground.material = Material
  Material.diffuseColor = new Color3(0, 1, 0)
  return ground
}
// 创建房顶
function buildRoof() {
  const roof = MeshBuilder.CreateCylinder('roof', { height: 1.2, diameter: 1.3, tessellation: 3 })
  roof.position.y = 1.22
  roof.rotation.z = Math.PI / 2
  roof.scaling.x = 0.75
  const roofMat = new StandardMaterial('roofMat')
  roof.material = roofMat
  roofMat.diffuseTexture = new Texture('/27612-20230520142333640-1561493237.png')
  return roof
}
// 创建房顶
function buildRoof1() {
  const roof = MeshBuilder.CreateCylinder('roof', { height: 2.4, diameter: 1.3, tessellation: 3 })
  roof.scaling.y = 0.75
  roof.rotation.z = Math.PI / 2
  roof.position.y = 1.22

  const roofMat = new StandardMaterial('roofMat')
  roof.material = roofMat
  roofMat.diffuseTexture = new Texture('/27612-20230520142333640-1561493237.png')
  return roof
}
// 创建房子
const buildBox = () => {
  const boxMat = new StandardMaterial('boxMat')
  boxMat.diffuseTexture = new Texture('/27612-20230520143226177-151692051.png')

  const faceUV = []
  faceUV[0] = new Vector4(0.5, 0.0, 0.75, 1.0) //后面
  faceUV[1] = new Vector4(0.0, 0.0, 0.25, 1.0) //前面
  faceUV[2] = new Vector4(0.25, 0, 0.5, 1.0) //右面
  faceUV[3] = new Vector4(0.75, 0, 1.0, 1.0) //左面

  const box = MeshBuilder.CreateBox('box', { faceUV: faceUV, wrap: true })
  box.material = boxMat
  box.position.y = 0.5
  return box
}
// 创建房子
const buildBox1 = () => {
  const boxMat = new StandardMaterial('boxMat')
  boxMat.diffuseTexture = new Texture('/27612-20230520143226177-151692051.png')

  const faceUV = []
  faceUV[0] = new Vector4(0.6, 0.0, 1.0, 1.0) //rear face
  faceUV[1] = new Vector4(0.0, 0.0, 0.25, 1.0) //front face
  faceUV[2] = new Vector4(0.4, 0, 0.6, 1.0) //right side
  faceUV[3] = new Vector4(0.4, 0, 0.6, 1.0) //left side

  const box = MeshBuilder.CreateBox('box', {
    width: 2,
    height: 1,
    faceUV: faceUV,
    wrap: true
  })
  box.material = boxMat
  box.position.y = 0.5

  return box
}
//调整地面/屋顶/屋身的大小及位置
const adjust = (ground: GroundMesh, roof: Mesh, box: Mesh) => {
  const scaling = new Vector3(0.5, 0.5, 0.5)
  ground.scaling = scaling
  roof.scaling = scaling
  box.scaling = scaling
  box.position.y = ground.position.y + 0.25
  roof.position.y = box.position.y + 0.4
  box.position.x = -1
  roof.position.x = box.position.x
}
//调整地面/屋顶/屋身的大小及位置
const adjust1 = (ground: GroundMesh, roof: Mesh, box: Mesh) => {
  const scaling = new Vector3(0.5, 0.5, 0.5)
  roof.scaling = scaling
  box.scaling = scaling
  box.position.y = ground.position.y + 0.25
  roof.position.y = box.position.y + 0.4
  box.position.x = 0.5
  roof.position.x = box.position.x
}
</script>

<style></style>
